<template>
  <div class="planet-main">
    <section>
      <div class="interst">
        <div class="header">
          <span>兴趣圈</span>
          <div>
            1.7万人已加入
            <img src="//cdn.cnbj1.fds.api.mi-img.com/user-avatar/p01kJd7y71rL/xPe7eK6RC9Rma.jpeg" alt="">
            &gt;
          </div>
        </div>
      </div>
      <div class="swipper">
        <swiper :options="swiperOption">
          <swiper-slide>
            <div class="member">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3137f0bbbc2736b17861e6765a88d120.jpg" alt="">
              <div class="title">我的小米十年</div>
              <p>一往无前</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="member">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3137f0bbbc2736b17861e6765a88d120.jpg" alt="">
              <div class="title">我的小米十年</div>
              <p>一往无前</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="member">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3137f0bbbc2736b17861e6765a88d120.jpg" alt="">
              <div class="title">我的小米十年</div>
              <p>一往无前</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="member">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3137f0bbbc2736b17861e6765a88d120.jpg" alt="">
              <div class="title">我的小米十年</div>
              <p>一往无前</p>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="member">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3137f0bbbc2736b17861e6765a88d120.jpg" alt="">
              <div class="title">我的小米十年</div>
              <p>一往无前</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 3.7,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.planet-main {
  height: 100%;
  width: px2rem(720 / 2);
  margin: 0 auto;
  section {
    background-color: #fff;
    .interst {
      height: px2rem(38 / 2);
      width: px2rem(672 / 2);
      padding-top: px2rem(36 / 2);
      padding-bottom: px2rem(34 / 2);
      margin: 0 auto;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px2rem(38 / 2);
        span {
          color: #000;
          font-size: px2rem(28 / 2);
          font-weight: bold;
        }
        div {
          height: px2rem(38 / 2);
          width: px2rem(280 / 2);
          color: #000;
          font-size: px2rem(24 / 2);
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-weight: bold;
          img {
            width: px2rem(38 / 2);
            border-radius: 50%;
          }
        }
      }
    }
    .swipper {
      width: 100%;
      margin: 0 auto;
      height: px2rem(206 / 2);
      background-color: #fff;
      .member {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: px2rem(206 / 2);
      }
      img {
        display: block;
        width: px2rem(112 / 2);
        border-radius: 50%;
        margin: 0 auto;
      }
      .title {
        color: #000;
        font-size: px2rem(24 / 2);
        text-align: center;
        margin-bottom: px2rem(4 / 2);
      }
      p {
        color: rgba(0,0,0,.5);
        text-align: center;
        font-size: px2rem(20 / 2);
      }
    }
  }
}
</style>
